<template>
  <div class="app-container">
    <el-row :gutter="20" style="align-items: stretch">
      <el-col :span="12">
        <el-card shadow="hover" class="area-setting-card area-setting-card--left">
          <el-divider content-position="left">定值区设置</el-divider>
          <div class="area-setting-grid">
            <!-- 当前激活定值区 -->
            <div class="area-setting-row">
              <div class="info">
                <span class="span-title">激活定值区：</span>
                <el-tag type="success">{{ displayActiveArea }}</el-tag>
              </div>
              <div class="actions">
                <el-button type="primary" size="small" :loading="loading" @click="refreshAreaList">
                  刷新
                </el-button>
              </div>
            </div>

            <!-- 当前展示定值区 -->
            <div class="area-setting-row">
              <div class="info">
                <span class="span-title">展示定值区：</span>
                <el-tag :type="isDisplayZoneActive ? 'success' : 'info'">
                  {{ displayCurrentArea }}
                </el-tag>
              </div>
              <div class="actions">
                <el-button
                  type="success"
                  size="small"
                  :loading="activating"
                  :disabled="isDisplayZoneActive"
                  @click="handleActivateDisplayZone"
                >
                  激活
                </el-button>
              </div>
            </div>

            <!-- 选择定值区 -->
            <div class="area-setting-row">
              <div class="info">
                <span class="span-title">选择展示定值区：</span>
                <el-select
                  v-model="localDisplayZone"
                  placeholder="请选择展示定值区"
                  :disabled="loading"
                  size="small"
                  style="width: 120px"
                  @change="handleDisplayZoneSelect"
                >
                  <el-option v-for="item in zoneList" :key="item" :label="item" :value="item" />
                </el-select>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="area-setting-card area-setting-card--right">
          <el-divider content-position="left">用户数据与NPI数据清零</el-divider>
          <NpiClearControl
            :cpu="1"
            @clear-user="handleUserDataClear"
            @clear-npi="handleNpiDataClear"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据和定值的一次二次设置模块 + 稳控切负荷功能模块 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card shadow="hover" class="ptst-setting-card">
          <el-divider content-position="left">数据和定值的一次二次设置</el-divider>
          <div class="ptst-setting-content">
            <div class="ptst-setting-item" style="margin-bottom: 16px">
              <span class="span-title">数据：</span>
              <el-select
                v-model="localDataSetting"
                placeholder="请选择数据显示类型"
                :loading="ptstStore.isLoading"
                :disabled="ptstStore.isUpdating"
                @change="handleDataSettingChange"
                style="width: 100%"
              >
                <el-option
                  v-for="option in enumOptions"
                  :key="option.Value"
                  :label="option.Desc"
                  :value="option.Value"
                />
              </el-select>
            </div>
            <div class="ptst-setting-item" style="margin-bottom: 16px">
              <span class="span-title">定值：</span>
              <el-select
                v-model="localSettingValue"
                placeholder="请选择定值显示类型"
                :loading="ptstStore.isLoading"
                :disabled="ptstStore.isUpdating"
                @change="handleSettingValueChange"
                style="width: 100%"
              >
                <el-option
                  v-for="option in enumOptions"
                  :key="option.Value"
                  :label="option.Desc"
                  :value="option.Value"
                />
              </el-select>
            </div>
            <div style="text-align: center">
              <el-button
                type="primary"
                size="small"
                :loading="ptstStore.isUpdating"
                @click="handleRefreshPtstSettings"
              >
                刷新
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="shedding-control-card">
          <el-divider content-position="left">稳控切负荷功能</el-divider>
          <SheddingControl
            :cpu="1"
            :auto-init="true"
            @refresh="handleSheddingRefresh"
            @update-shedding="handleSheddingUpdate"
            @update-recover="handleRecoverUpdate"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 时间设置模块 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card shadow="hover" class="time-setting-card">
          <TimeSettingPanel
            :cpu="1"
            :auto-init="true"
            @refresh="handleTimeSettingRefresh"
            @update="handleTimeSettingUpdate"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 手动录波模块 + 录波备份模块（等高卡片） -->
    <el-row :gutter="20" style="margin-top: 20px; align-items: stretch">
      <el-col :span="12">
        <el-card shadow="hover" class="wave-record-card">
          <el-divider content-position="left">手动录波</el-divider>
          <div class="wave-record-content">
            <el-form :inline="true" label-width="90px" class="wave-record-form">
              <!-- <el-form-item label="CPU">
                <el-input-number v-model="waveCpu" :min="1" :max="1" :disabled="true" />
              </el-form-item> -->
              <el-form-item label="录波间隔">
                <el-input-number
                  v-model="waveInterval"
                  :min="1"
                  :step="1"
                  controls-position="right"
                  placeholder="请输入间隔"
                />
              </el-form-item>
              <el-form-item label="最大长度">
                <el-input-number
                  v-model="waveMaxLen"
                  :min="1"
                  :step="1"
                  controls-position="right"
                  placeholder="请输入最大长度"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  :loading="waveSending"
                  :disabled="!canSendWave || waveSending"
                  @click="handleManualWaveRecord"
                >
                  手动录波
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover" class="wave-record-card">
          <!-- 录波备份模块 -->
          <el-divider content-position="left">录波备份</el-divider>
          <div class="wave-backup-content">
            <div class="wave-backup-info">
              <div class="info-text">
                <span class="span-title">备份信息：</span>
                <span>
                  文件数：{{ waveBackupInfo?.fault_cnt ?? "-" }} ，最新ID：{{
                    waveBackupInfo?.last_id ?? "-"
                  }}
                </span>
              </div>
              <div class="actions">
                <el-button
                  type="primary"
                  size="small"
                  :loading="waveBackupInfoLoading"
                  @click="refreshWaveBackupInfo"
                >
                  刷新
                </el-button>
                <el-button
                  type="success"
                  size="small"
                  :loading="waveBackupTriggering"
                  @click="handleTriggerWaveBackup"
                >
                  执行录波备份
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 定值区拷贝 + 液晶对比度设置 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card shadow="hover" class="area-setting-card__zone-copy">
          <el-divider content-position="left">定值区拷贝</el-divider>
          <div class="zone-copy-content">
            <div class="zone-copy-selects" style="margin-bottom: 16px">
              <div style="margin-bottom: 12px">
                <span class="span-title">源定值区：</span>
                <el-select
                  v-model="srcZone"
                  placeholder="请选择源定值区"
                  style="width: 100px; margin-left: 8px"
                  :clearable="false"
                  size="small"
                >
                  <el-option v-for="item in zoneList" :key="item" :label="item" :value="item" />
                </el-select>
              </div>
              <div style="margin-bottom: 12px">
                <span class="span-title">目标定值区：</span>
                <el-select
                  v-model="dstZone"
                  placeholder="请选择目标定值区"
                  style="width: 100px"
                  :clearable="false"
                  size="small"
                >
                  <el-option v-for="item in zoneList" :key="item" :label="item" :value="item" />
                </el-select>
              </div>
            </div>
            <div style="text-align: center">
              <el-button type="primary" size="small" @click="handleCopyBtnClick">
                定值区拷贝
              </el-button>
            </div>
          </div>
          <el-dialog
            v-model="showCopyDialog"
            title="定值区拷贝"
            width="340px"
            :close-on-click-modal="false"
          >
            <div style="text-align: center; padding: 24px 0; font-size: 16px">
              确认将
              <b style="color: #409eff">定值区 {{ srcZone }}</b>
              拷贝到
              <b style="color: #67c23a">定值区 {{ dstZone }}</b>
              吗？
            </div>
            <template #footer>
              <el-row justify="center" :gutter="16">
                <el-col :span="12">
                  <el-button style="width: 100%" @click="showCopyDialog = false">取消</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button
                    type="primary"
                    style="width: 100%"
                    :loading="copying"
                    @click="handleCopyZone"
                  >
                    确认
                  </el-button>
                </el-col>
              </el-row>
            </template>
          </el-dialog>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="lcd-contrast-card">
          <el-divider content-position="left">液晶对比度设置</el-divider>
          <div class="lcd-contrast-content">
            <div class="lcd-contrast-display" style="margin-bottom: 16px">
              <span class="span-title">当前对比度：{{ lcdContrast }}</span>
              <el-button
                type="primary"
                size="small"
                :loading="lcdContrastLoading"
                @click="refreshLcdContrast(1)"
                style="margin-left: 12px"
              >
                刷新
              </el-button>
            </div>
            <div class="lcd-contrast-setting">
              <span class="span-title">设置对比度：</span>
              <el-slider
                v-model="lcdContrast"
                :min="0"
                :max="10"
                :step="1"
                :disabled="lcdContrastLoading || lcdContrastUpdating"
                show-input
                style="margin-top: 8px"
              />
            </div>
            <div style="text-align: center; margin-top: 16px">
              <el-button
                type="success"
                size="small"
                :loading="lcdContrastUpdating"
                :disabled="lcdContrastLoading"
                @click="handleUpdateLcdContrast"
              >
                更新对比度
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-alert
      v-if="errorMsg"
      :title="errorMsg"
      type="error"
      show-icon
      style="margin-top: 16px"
      closable
      @close="errorMsg = ''"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { useSettingZoneStore, usePtstStore, useWaveChartStore } from "@/store";
import type { WaveRecordPayload, WaveBackupInfoItem } from "@/api/hmi/wave-chart.api";
import { useLcdContrast } from "@/composables/useLcdContrast";
import TimeSettingPanel from "@/components/TimeSettingPanel/index.vue";
import SheddingControl from "@/components/SheddingControl/index.vue";
import NpiClearControl from "@/components/NpiClearControl/index.vue";

// Store 和路由
const settingZoneStore = useSettingZoneStore();
const ptstStore = usePtstStore();
const waveChartStore = useWaveChartStore();

// 液晶对比度 Composable
const {
  localContrast: lcdContrast,
  isLoading: lcdContrastLoading,
  isUpdating: lcdContrastUpdating,
  refreshLcdContrast,
  updateLcdContrast,
  initLcdContrast,
} = useLcdContrast();

// 响应式状态
const loading = ref<boolean>(false);
const activating = ref<boolean>(false);
const errorMsg = ref<string>("");
const apiPath_settingZone = ref<string>("");
const showCopyDialog = ref(false);
const zoneList = computed(() => settingZoneStore.zoneList as number[]);
const srcZone = ref<number>(1);
const dstZone = ref<number>(1);
const copying = ref(false);

// 本地展示定值区（用于选择器）
const localDisplayZone = ref<number>(settingZoneStore.displayZone);

// 手动录波 本地状态
const waveCpu = ref<number>(1);
const waveInterval = ref<number | null>(1);
const waveMaxLen = ref<number | null>(320);
const waveSending = ref<boolean>(false);
const canSendWave = computed(() => {
  return (
    waveInterval.value !== null &&
    waveInterval.value > 0 &&
    waveMaxLen.value !== null &&
    waveMaxLen.value > 0
  );
});

// 录波备份 本地状态
const waveBackupInfo = ref<WaveBackupInfoItem | null>(null);
const waveBackupInfoLoading = ref<boolean>(false);
const waveBackupTriggering = ref<boolean>(false);

// PTST 相关状态
const localDataSetting = ref<number>(0);
const localSettingValue = ref<number>(0);
const enumOptions = computed(() => ptstStore.getEnumOptions());

// 计算属性
const displayActiveArea = computed(() => settingZoneStore.activeZone);
const displayCurrentArea = computed(() => settingZoneStore.displayZone);
const isDisplayZoneActive = computed(
  () => settingZoneStore.displayZone === settingZoneStore.activeZone
);

// PTST 事件处理函数
const handleDataSettingChange = async (value: number) => {
  try {
    await ptstStore.updateDataSetting(1, value);
    ElMessage.success("数据显示设置更新成功");
  } catch (e: any) {
    errorMsg.value = "数据显示设置更新失败：" + e.message;
    // 恢复原值
    const currentSettings = ptstStore.getCurrentSettings();
    localDataSetting.value = currentSettings.data;
  }
};

const handleSettingValueChange = async (value: number) => {
  try {
    await ptstStore.updateSettingValue(1, value);
    ElMessage.success("定值显示设置更新成功");
  } catch (e: any) {
    errorMsg.value = "定值显示设置更新失败：" + e.message;
    // 恢复原值
    const currentSettings = ptstStore.getCurrentSettings();
    localSettingValue.value = currentSettings.setting;
  }
};

const handleRefreshPtstSettings = async () => {
  try {
    await ptstStore.fetchPtstSettings(1);
    const currentSettings = ptstStore.getCurrentSettings();
    localDataSetting.value = currentSettings.data;
    localSettingValue.value = currentSettings.setting;
    ElMessage.success("PTST设置刷新成功");
  } catch (e: any) {
    errorMsg.value = "PTST设置刷新失败：" + e.message;
  }
};

// 时间设置事件处理函数
const handleTimeSettingRefresh = (cpu: number) => {
  try {
    ElMessage.success(`CPU ${cpu} 时间设置刷新成功`);
  } catch (e: any) {
    errorMsg.value = "时间设置刷新失败：" + e.message;
  }
};

const handleTimeSettingUpdate = (cpu: number, success: boolean) => {
  try {
    if (success) {
      ElMessage.success(`CPU ${cpu} 时间设置整定成功`);
    } else {
      errorMsg.value = `CPU ${cpu} 时间设置整定失败`;
    }
  } catch (e: any) {
    errorMsg.value = "时间设置整定失败：" + e.message;
  }
};

// 手动录波事件处理
const handleManualWaveRecord = async () => {
  if (!canSendWave.value || waveSending.value) return;
  waveSending.value = true;
  try {
    const payload: WaveRecordPayload = [
      {
        interval: waveInterval.value as number,
        wavelen: waveMaxLen.value as number,
      },
    ];
    const res = await waveChartStore.manualWaveRecord(waveCpu.value, payload);
    if (res && res.status === "Success") {
      ElMessage.success("手动录波成功");
    } else {
      ElMessage.error("手动录波失败");
    }
  } catch (e: any) {
    errorMsg.value = "手动录波失败：" + (e?.message || e);
  } finally {
    waveSending.value = false;
  }
};

// 录波备份：查询信息
const refreshWaveBackupInfo = async () => {
  waveBackupInfoLoading.value = true;
  try {
    const info = await waveChartStore.queryWaveBackupInfo(1);
    if (info) {
      waveBackupInfo.value = info;
      //ElMessage.success("录波备份信息刷新成功");
    } else {
      ElMessage.warning("未获取到录波备份信息");
    }
  } catch (e: any) {
    errorMsg.value = "录波备份信息获取失败：" + (e?.message || e);
  } finally {
    waveBackupInfoLoading.value = false;
  }
};

// 录波备份：触发执行
const handleTriggerWaveBackup = async () => {
  if (waveBackupTriggering.value) return;
  waveBackupTriggering.value = true;
  try {
    const res = await waveChartStore.triggerWaveBackup(1);
    if (res && res.success === 1) {
      ElMessage.success("录波备份触发成功");
      await refreshWaveBackupInfo();
    } else {
      ElMessage.error("录波备份触发失败");
    }
  } catch (e: any) {
    errorMsg.value = "录波备份触发失败：" + (e?.message || e);
  } finally {
    waveBackupTriggering.value = false;
  }
};

// 稳控切负荷事件处理函数
const handleSheddingRefresh = (cpu: number) => {
  try {
    ElMessage.success(`CPU ${cpu} 稳控切负荷信息刷新成功`);
  } catch (e: any) {
    errorMsg.value = "稳控切负荷信息刷新失败：" + e.message;
  }
};

const handleSheddingUpdate = (cpu: number, value: number, success: boolean) => {
  try {
    if (success) {
      ElMessage.success(`CPU ${cpu} 切负荷层级设置成功，值：${value}`);
    } else {
      errorMsg.value = `CPU ${cpu} 切负荷层级设置失败`;
    }
  } catch (e: any) {
    errorMsg.value = "切负荷层级设置失败：" + e.message;
  }
};

const handleRecoverUpdate = (cpu: number, value: number, success: boolean) => {
  try {
    if (success) {
      ElMessage.success(`CPU ${cpu} 恢复负荷层级设置成功，值：${value}`);
    } else {
      errorMsg.value = `CPU ${cpu} 恢复负荷层级设置失败`;
    }
  } catch (e: any) {
    errorMsg.value = "恢复负荷层级设置失败：" + e.message;
  }
};

// 事件处理函数
const handleSelectDisplayArea = (area: number) => {
  if (!zoneList.value.includes(area)) {
    ElMessage.warning("当前定值区不在列表中，请刷新列表");
    return;
  }
  settingZoneStore.setDisplayZone(area);
  ElMessage.success(`已切换到展示定值区：${area}`);
};

// 选择器变更回调（复用原有逻辑）
const handleDisplayZoneSelect = (value: number) => {
  try {
    handleSelectDisplayArea(value);
  } catch (e: any) {
    errorMsg.value = "展示定值区切换失败：" + e.message;
  }
};

const handleActivateDisplayZone = async () => {
  if (isDisplayZoneActive.value) {
    ElMessage.info("当前展示的定值区已经是激活状态");
    return;
  }

  activating.value = true;
  errorMsg.value = "";

  try {
    await settingZoneStore.activateDisplayZone(apiPath_settingZone.value);
    ElMessage.success(`已激活定值区：${settingZoneStore.displayZone}`);
  } catch (e: any) {
    errorMsg.value = "激活定值区失败：" + e.message;
  } finally {
    activating.value = false;
  }
};

const refreshAreaList = async () => {
  loading.value = true;
  errorMsg.value = "";

  try {
    await settingZoneStore.fetchSettingZoneInfo(apiPath_settingZone.value);

    if (!zoneList.value.includes(settingZoneStore.displayZone)) {
      settingZoneStore.setDisplayZone(settingZoneStore.activeZone);
      ElMessage.warning("当前展示的定值区不在列表中，已重置为激活定值区");
    }
  } catch (e: any) {
    errorMsg.value = "定值区列表获取失败：" + e.message;
  } finally {
    loading.value = false;
  }
};

// NPI 数据清零事件处理函数
const handleUserDataClear = (cpu: number, success: boolean) => {
  try {
    if (success) {
      ElMessage.success(`CPU ${cpu} 用户数据清零成功`);
    } else {
      errorMsg.value = `CPU ${cpu} 用户数据清零失败`;
    }
  } catch (e: any) {
    errorMsg.value = "用户数据清零失败：" + e.message;
  }
};

const handleNpiDataClear = (cpu: number, success: boolean) => {
  try {
    if (success) {
      ElMessage.success(`CPU ${cpu} NPI 数据清零成功`);
    } else {
      errorMsg.value = `CPU ${cpu} NPI 数据清零失败`;
    }
  } catch (e: any) {
    errorMsg.value = "NPI 数据清零失败：" + e.message;
  }
};

const handleCopyZone = async () => {
  if (srcZone.value === null || dstZone.value === null) {
    ElMessage.warning("请选择源定值区和目标定值区");
    return;
  }
  if (srcZone.value === dstZone.value) {
    ElMessage.warning("源定值区和目标定值区不能相同");
    return;
  }
  copying.value = true;
  try {
    const res: any = await settingZoneStore.copyZone(1, srcZone.value, dstZone.value);
    if (res.status === "Success") {
      ElMessage.success("定值区拷贝成功");
      showCopyDialog.value = false;
    } else {
      ElMessage.error(res.message || "定值区拷贝失败");
    }
  } catch (e: any) {
    ElMessage.error(e.message || "定值区拷贝失败");
  } finally {
    copying.value = false;
  }
};

const handleCopyBtnClick = () => {
  if (srcZone.value === dstZone.value) {
    ElMessage.warning("源定值区和目标定值区不能相同");
    return;
  }
  showCopyDialog.value = true;
};

// 初始化函数
const initSettingZone = async () => {
  try {
    // apiPath.value = (route.meta.params as any).api;
    apiPath_settingZone.value = "/setting/1/zone";
    if (!settingZoneStore.isReady) {
      await settingZoneStore.fetchSettingZoneInfo(apiPath_settingZone.value);
    }
  } catch (e: any) {
    errorMsg.value = "定值区初始化失败：" + e.message;
  }
};

// PTST 初始化函数
const initPtstSettings = async () => {
  try {
    if (!ptstStore.isReady) {
      await ptstStore.fetchPtstSettings(1);
    }
    const currentSettings = ptstStore.getCurrentSettings();
    localDataSetting.value = currentSettings.data;
    localSettingValue.value = currentSettings.setting;
  } catch (e: any) {
    errorMsg.value = "PTST设置初始化失败：" + e.message;
  }
};

// 液晶对比度更新
const handleUpdateLcdContrast = async () => {
  try {
    const success = await updateLcdContrast(1, lcdContrast.value);
    if (!success) {
      errorMsg.value = "液晶对比度更新失败";
    }
  } catch (e: any) {
    errorMsg.value = "液晶对比度更新失败：" + e.message;
  }
};

// 生命周期
onMounted(() => {
  initSettingZone();
  initPtstSettings();
  initLcdContrast(1);
  // 同步本地展示定值区选择器
  localDisplayZone.value = settingZoneStore.displayZone;
  // 初始化查询录波备份信息
  refreshWaveBackupInfo();
  if (zoneList.value.length > 0) {
    srcZone.value = zoneList.value[0];
    dstZone.value = zoneList.value[0];
  }
});

watch(zoneList, (list) => {
  if (list.length > 0) {
    if (!list.includes(srcZone.value)) srcZone.value = list[0];
    if (!list.includes(dstZone.value)) dstZone.value = list[0];
  }
});
// 同步 store 的展示定值区到本地选择器
watch(
  () => settingZoneStore.displayZone,
  (val) => {
    localDisplayZone.value = val as number;
  }
);
</script>

<style scoped lang="scss">
.area-setting-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.area-setting-card--left {
  min-height: 320px;
}
.area-setting-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.area-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.area-setting-row .info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.area-setting-row .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.area-setting-card--right {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.npi-center-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.npi-center-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.area-setting-card__current-area,
.area-setting-card__display-area {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.area-setting-card__zone-copy {
  min-height: 280px;

  .zone-copy-content {
    padding: 16px 0;
  }

  .zone-copy-selects {
    .span-title {
      font-weight: bold;
      margin-right: 8px;
      display: inline-block;
      min-width: 80px;
    }
  }
}

// PTST 设置样式
.ptst-setting-card {
  min-height: 280px;

  .ptst-setting-content {
    padding: 16px 0;
  }

  .ptst-setting-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .span-title {
      font-weight: bold;
      margin-right: 8px;
      min-width: 60px;
    }

    .el-select {
      flex: 1;
    }
  }

  .ptst-setting-info {
    margin-top: 16px;
  }
}

// 稳控切负荷样式
.shedding-control-card {
  min-height: 280px;
}

// 时间设置样式
.time-setting-card {
  .span-title {
    font-weight: bold;
    margin-right: 8px;
  }
}

// 液晶对比度样式
.lcd-contrast-card {
  min-height: 280px;

  .lcd-contrast-content {
    padding: 16px 0;
  }

  .lcd-contrast-display {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .span-title {
      font-weight: bold;
      margin-right: 8px;
    }
  }

  .lcd-contrast-setting {
    .span-title {
      font-weight: bold;
      margin-right: 8px;
    }
  }
}

// 定值区下拉菜单优化样式
.zone-dropdown-menu {
  max-height: 300px;
  overflow-y: auto;

  // 自定义滚动条样式，符合工业界面风格
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }

  // Firefox 样式
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

// 手动录波样式
.wave-record-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  .wave-record-content {
    padding: 12px 0;
  }
  .wave-record-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .wave-backup-content {
    padding: 8px 0 12px 0;
    width: 80%;
    margin: 0 auto;
  }
  .wave-backup-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    .info-text {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .span-title {
      font-weight: bold;
    }
  }
}
</style>
